body,html {
  margin:0;
  padding:0;}
  
@font-face {
	font-family: "Title";
	src: url("fonts/relationship.ttf");}
	
@font-face {
	font-family: "Newake";
	src: url("fonts/Newake.otf");}
	
h1 {font-family: "Title";}
h2 {font-family: "Newake";}

mark {background-color: white;}
  
body { background-image: url("yuri images/clouds 2.jpg");}
  
#flex {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;}

	#main {
		position: relative;
		top: 170px;
		display: flex;
		justify-content: center;
		gap: 10px;
		border: solid 1px black;
		background-color: white;}
		
		#umbrella {
			position: absolute;
			top: -151px;
			left: 0px;
			height: 150px;}
			
		#sidebar {
			position: relative;
			display: flex;
			flex-direction: column;
			gap: 10px;
			position: relative;
			padding-top: 10px;
			padding-left: 10px;
			padding-bottom: 10px;
			width: 165px;
			border-right: dashed 1px black;
			background-color: #fff;}
			
			#nav {
				width: 145px;
				color: white;
				text-align: center;
				padding-left: 5px;
				padding-right: 5px;
				border-radius: 5px;
				background-color: #cad48f;}
				
				#intnav {
					text-align: right;
					padding-right: 5px;
					background-color: white;
					color: black;}
					
			#kaoru {
				width: 125px;
				padding-left: 15px;}
					
			#upcoming {
				width: 135px;
				padding-left: 10px;
				padding-right: 10px;
				color: white;
				background-color: #a6d4db;}
	
		#content {
			position: relative;
			width: 465px;
			padding-left: 20px;
			padding-right: 20px;
			padding-top: 20px;
			font-size: 90%;
			border-left: dashed 1px black;
			background-color: white;}
			
			#standout {
				display: flex;
				justify-content: center;}
				
				#instand {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 430px;
					height: 50px;
					font-size: 125%;
					border-radius: 10px;
					box-shadow: 3px 3px 15px #ffef94;
					border: solid 1px #ffef94;
					background-image: url("yuri images/flowers 12.gif");}
					
			#news {
				display: flex;
				justify-content: center;}
				
				#newsbox {
					position: relative;
					width: 410px;
					padding-left: 10px;
					padding-right: 10px;
					border-radius: 10px;
					border: double black;}
					
					#newshead {
						position: absolute;
						top: -32px;}
						
			#update {
				position: relative;
				width: 465px;}
				
				#updateact {
					position: absolute;
					top: 10px;
					left: 20px;
					width: 280px;
					height: 205px;
					font-size: 75%;
					overflow: auto;}
				
				#yuuna {
					width: 100%;}
			
			#banner {
				position: absolute;
				display: flex;
				justify-content: center;
				align-content: center;
				top: -160px;
				left: 169px;
				width: 700px;
				height: 150px;
				overflow: hidden;
				border-radius: 15px;
				border: solid 1px #669447;}
				
				#hime {
					position: absolute;
					top: -168px;
					left: 164px;
					font-size: 90px;
					text-shadow: 5px 3px 5px #fff;
					color: #db2a16;
					z-index: 2;}
					
				#subheading {
					position: absolute;
					top: -45px;
					right: 10px;
					z-index: 3;}
				
				#flowerbed {
					position: absolute;
					bottom: -17px;
					width: 700px;
					z-index: 1;}
				
		#rightbar {
			display: flex;
			flex-direction: column;
			position: relative;
			width: 170px;}	
			
			#cover {
				border: dashed 1px black;
				width: 150px;}
				
			#ayakari {
				position: absolute;
				height: 100px;
				right: 5px;
				bottom: 0px;}
				

#completed {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 10px;}
	
	#compbox {
		display: flex;
		flex-direction: column;
		align-items: end;
		position: relative;
		height: 215px;
		width: 443px;
		padding-left: 10px;
		padding-right: 10px;
		border: solid 1px black;}
		
	#compbox1 {
		display: flex;
		flex-direction: column;
		align-items: end;
		position: relative;
		height: 215px;
		width: 443px;
		padding-left: 10px;
		padding-right: 10px;
		border: dashed 1px gray;}
		
	#seriest {
		display: flex;
		flex-direction: column;
		position: relative;
		width: 443px;
		padding-left: 10px;
		padding-right: 10px;
		border: solid 1px black;}
		
		#engjp {
			position: relative;
			text-align: right;
			z-index: 2;
			margin: 5px;}
			
		#compdates {
			position: absolute;
			font-size: 60%;
			left: 10px;
			top: 0px;
			z-index: 3;}
			
		#compdates1 {
			position: absolute;
			font-size: 60%;
			left: 10px;
			bottom: 0px;
			z-index: 3;}
		
			#secs {
				position: absolute;
				left: -26px;
				bottom: -8px;
				height: 160px;
				z-index: 2;}
				
			#witch {
				position: absolute;
				top: 0px;
				left: 0px;
				opacity: 30%;
				z-index: 0;}
				
			#witchtext, #witchtext2dk, #witchtextami, #witchtextaqua, 
			#witchtextdh, #witchtextnn, #witchtextshirokuro,
			#witchtextblueprints, #witchtextcirque {
				position: relative;
				right: 0px;
				font-size: 90%;
				width: 350px;
				overflow: auto;}
				
				#witchtext2dk {
					width: 275px;}
					
				#witchtextami {
					width: 244px;}
					
				#witchtextaqua {
					width: 143px;}
					
				#witchtextdh {
					width: 220px;}
					
				#witchtextnn {
					width: 215px;}
					
				#witchtextshirokuro {
					width: 270px;}
					
				#witchtextblueprints {
					width: 250px;}
					
				#witchtextcirque {
					width: 175px;}
					
				
			#nanakae, #aquablue, #dh, #nn, #bgmrsp, #blueprints {
				position: absolute;
				height: 215px;
				left: 0px;
				bottom: 0px;}
				
				#nn {
					height: 165px;}
					
			#absurd {
				position: absolute;
				height: 190px;
				bottom: 0px;
				left: 10px;}
				
			#amiyuu {
				position: absolute;
				height: 275px;
				left: -65px;
				bottom: -70px;
				z-index: 1;}
				
			#shirokuro {
				position: absolute;
				height: 200px;
				left: 10px;
				bottom: -7px;}
				
			#aoi {
				position: absolute;
				height: 210px;
				left: -35px;
				bottom: 0px;}
				
			#iberis {
				position: absolute;
				height: 275px;
				left: -15px;
				bottom: -20px;
				z-index: 1;}
				
			#cirque {
				position: absolute;
				height: 160px;
				left: -18px;
				bottom: 0px;}
				
			#clover {
				position: absolute;
				height: 210px;
				left: 20px;
				bottom: -5px;}
				
			#cocytus {
			  position: absolute;
			  height: 300px;
			  left: 10px;
			  bottom: -147px;
			  z-index: 1;}
			  
			#collectors {
				position: absolute;
				height: 160px;
				left: -40px;
				bottom: -35px;
				z-index: 1;}
				
			
			#papillon {
				position: absolute;
				height: 200px;
				left: -90px;
				bottom: -15px;
				transform: rotate(10deg);}

				
#gap {
	display: hidden;
	position: absolute;
	bottom: -30px;
	width: 10px;
	height: 10px;}